<template>
  <div class="contest-list">
    <h2>比赛列表</h2>
    <el-card
      v-for="contest in contests"
      :key="contest.id"
      class="contest-card"
      :style="{ marginBottom: '20px' }"
    >
      <div class="contest-info">
        <h3>{{ contest.name }}</h3>
        <p>开始时间: {{ formatDate(contest.startTime) }}</p>
        <p>结束时间: {{ formatDate(contest.endTime) }}</p>
        <p v-if="contest.status === 1">比赛进行中</p>
        <p v-else-if="contest.status === 2">比赛已结束</p>
        <p v-else>比赛未开始</p>

        <!-- 判断是否可以进入比赛 -->
        <el-button
          :disabled="contest.status === 0"
          type="primary"
          @click="enterContest(contest.id)"
        >
          {{ contest.status === 0 ? "开始比赛" : "进入比赛" }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      contests: [], // 存储比赛信息
    };
  },
  mounted() {
    this.fetchContests(); // 获取比赛列表
  },
  methods: {
    fetchContests() {
      // 调用后端接口获取比赛信息
      request
        .get("/contest/selectAll") // 假设接口返回所有比赛信息
        .then((res) => {
          if (res && res.data) {
            this.contests = res.data;

            // 检查每个比赛的状态，并根据时间更新状态
            this.contests.forEach((contest) => {
              const currentTime = new Date().getTime(); // 获取当前时间
              const startTime = new Date(contest.startTime).getTime();
              const endTime = new Date(contest.endTime).getTime();

              let shouldStatus = 0; // 初始化为比赛未开始状态

              if (currentTime < startTime) {
                shouldStatus = 0; // 比赛未开始
              } else if (currentTime >= startTime && currentTime <= endTime) {
                shouldStatus = 1; // 比赛进行中
              } else if (currentTime > endTime) {
                shouldStatus = 2; // 比赛已结束
              }
              // 如果状态不正确，向后端发送更新请求
              if (contest.status !== shouldStatus) {
                this.updateContestStatus(contest.id, shouldStatus);
              }
            });
          }
        })
        .catch((error) => {
          ElMessage.error("加载比赛列表失败");
        });
    },

    // 更新比赛状态
    async updateContestStatus(contestId, status) {
      try {
        const res = await request.put(
          `/contest/updateStatus/${contestId}/${status}`
        );
        if (res.code === "200") {
          ElMessage.success("比赛状态更新成功");
        } else {
          ElMessage.error("更新比赛状态失败");
        }
      } catch (error) {
        ElMessage.error("更新比赛状态失败");
      }
    },

    // 格式化日期时间
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString();
    },

    enterContest(contestId) {
      // 跳转到比赛详情页
      this.$router.push(`/contest/${contestId}`);
    },
  },
};
</script>

<style scoped>
.contest-list {
  width: 60%;
  padding: 20px;
  margin: 0 auto; /* 使外层容器居中 */
  text-align: center; /* 使标题居中 */
}

.contest-card {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: left; /* 使卡片内容左对齐 */
}

.contest-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contest-info h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contest-info p {
  font-size: 16px;
  color: #666;
}

.el-button {
  margin-top: 15px;
}
</style>
